<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <style>
    img {
      width: 400px;
      height: 400px;
    }
  </style>
</head>

<body>
  搜索：<input type="text" value=""><button style="margin-left: 5px;">🔍</button>
  <table border="1" height="30" width="200"></table>
  <script>
    //实现通过搜索内容，去显示对应的内容
    //1、获取到元素
    const input = document.querySelector('input') //表单
    const btn = document.querySelector('button') //按钮
    const table = document.querySelector('table')
    //2、需要一个数组来对表格的内容进行渲染,使用：数组对象
    const arrObj = [
      {
        name: 'C语言入门',
        price: 39.9
      },
      {
        name: 'Java从入门到精通',
        price: 49.9
      },
      {
        name: 'HTML5与CSS3入门',
        price: 35.5
      },
      {
        name: 'Vue2+Vue3框架入门到精通',
        price: 59.9
      },
      {
        name: 'Ajax与Git入门',
        price: 25.9
      }
    ]
    /*实现表单的搜索*/
    //1、我们需要先把数组对象给初始化渲染到页面中
    function getData(...arr) {
      //1.1 str变量作为一个标签的拼接
      let str = `<tr><td>书名</td><td>价钱</td></tr>` //拼接出固定的表头
      //1.2 循环形参arr,然后去拼接数组中的属性
      arr.forEach(item => {
        str += `<tr><td>${item.name}</td><td>${item.price}</td></tr>`
      })
      //1.3 然后我们要把 str 渲染到页面中，也就是 table表格的范围
      return table.innerHTML = str
    }

    //2、调用函数，初始化渲染数据
    getData(...arrObj)

    //3、初始化渲染结束，给查询按钮绑定点击事件
    btn.addEventListener('click', () => {
      const newArr = [] //新数组用来存放满足条件的值
      //3.1 循环数组
      arrObj.forEach(item => {
        //3.2 判定有没有包含:match()
        if (item.name.match(input.value))
          newArr.push(item)
      })
      //3.2 添加满足的条件以后，就调用函数，把newArr作为实参
      getData(...newArr)
    })

  </script>
</body>

</html>